<!doctype html>
<html>
<head>
<script src="sockjs-1.1.2.js"></script>
<script src="lealone-5.0.0.js"></script>
<script src="vue.min-2.3.3.js"></script>
<script src="generated/model/User.js"></script>
</head>
<body lang="en">
    <h1>vue form test</h1>
    <div id="form1">
        name: <input v-model="user.name" placeholder="edit me"><br>
        phone: <input v-model="user.phone" placeholder="edit me"><br>
        notes: <input v-model="user.notes" placeholder="edit me"><br>
        <button v-on:click="user.insert()">提交</button><br><br>
        
        <!-- 最优雅的方案 -->
        <div>
        name: <eq-input v-model="dao.name"></eq-input><br>
        phone: <eq-input v-model="dao.phone"></eq-input><br> 
        <button v-on:click="find1()">查询1</button>
        </div>

        <!-- 最糟糕的方案 -->
        <div>
        name: <input v-model="user.name"><br>
        phone: <input v-model="user.phone"><br> 
        <button v-on:click="find2(user)">查询2</button>
        </div>

        <ul>
        <li v-for="(user, index) in users">
            {{ index }} - {{ user }}
        </li>
        </ul>
    </div>

    <script> 
    Vue.component('eq-input', {
        props: ['value'],
        template: '<input v-bind:value="value" v-on:input="input($event.target)" >',
        methods: {
            input: function(target) {
                target._value.eq(target.value, true); // 嗯嗯，太黑科技了 :)
                this.$emit('input', target.value);
            }
        }
    });
      
    new Vue({
        el: '#form1',
        data: {
            user: new User(),
            users: [],
            dao: User.dao
        },
        methods: {
            find1: function() {
                var that = this;
                this.dao.findList(function(users) {
                    that.users = users;
                });
            },
            find2: function(user) {
                var that = this;
                User.dao.where().name.eq(user.name.get()).and().phone.eq(user.phone.get()).findList(function(users) {
                    that.users = users;
                });
            }
        }
    })
    </script>
</body>
</html>
